<template>
  <div id="SearchMould">
    <div
      v-show="!PageStatus"
      class="goods-list"
    >
      <div
        v-for="item in shopListData"
        :key="item.id"
        class="goods-item"
        @click="GotoShop(item)"
      >
        <div class="logo">
          <img
            :src="item.cLogoUrl"
            :alt="item.cShopName"
            class="logo-img"
          >
        </div>
        <div class="shop-name">
          {{ item.cShopName }}
        </div>
        <div
          v-if="item.iType !='undefined'"
          class="shop-type"
        >
          {{ item.iType === 1?'自营':'非自营' }}
        </div>
        <div class="shop-status">
          <!-- {{ shop.detail.bCorpStore }}人已关注 -->
          {{ FocusNum(item.id) }} {{ totalCount }}人已关注
        </div>
        <div
          class="shop-button"
          @click="GotoShop(item)"
        >
          进店
        </div>
      </div>
    </div>
    <div
      v-show="PageStatus"
      class="goods-list"
    >
      <span>暂无相关数据</span>
    </div>
  </div>
</template>

<script>
import bus from '@/api/eventBus'
export default {
  name: "SearchMould",
  components: {},
  data() {
    return {
      shopListData: [],
      totalCount: '',
      PageStatus: true
    };
  },
  computed: {
    FocusNum() {
      return function(id) {
        console.log('FocusNum计算', id)
        // this.GetShopFavoritesData(id)
        return this.GetShopFavoritesData(id)
      }
    }
  },
  mounted() {
    bus.$on('ShopDataListData', data =>{
      console.log('asdas', data)
      if(data.length === 0) {
        this.PageStatus = true
      } else {
        this.PageStatus = false
        this.shopListData = data  
      }
    })
  },
  methods: {
    // 进店
    GotoShop(GotoShop) {
      console.log("进店", GotoShop);
      if(this.$route.path === '/shopindextow') {
        this.$router.replace({
          path: "/shopindex?id=" + GotoShop.id,
        });
        sessionStorage.setItem("ShopID", GotoShop.id)
      } else {
        this.$router.replace({
          path: "/shopindextow?id=" + GotoShop.id,
        });
        sessionStorage.setItem("ShopID", GotoShop.id)
      }
    },
    // 关注人数
    GetShopFavoritesData(iShopId) {
      let params =  {
        token: localStorage.getItem('token'),
        currentPage: 1,
        pagesize: 1200,
        shopName:"",
        iShopId: iShopId
      }
      this.$api.commit.GetShopFavorites(params).then((res) => {
        console.log('关注人数res', res)
        if (res.code === 200) {
          console.log('this.关注人数', res.data.pager.totalCount)
          this.totalCount = res.data.pager.totalCount
        }
      });
    }
  },
};
</script>

<style scoped lang="scss">
#SearchMould {
  padding: 0 16.19rem;
  margin-top: 2.19rem;
  display: flex;
  flex-direction: column;
  .goods-list {
    margin-top: 1.88rem;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;

    .goods-item {
      width: 19%;
      height: 28rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 1.333333%;
      margin-bottom: 2.38rem;
      background: #00dea9;
      color: #fff;
      cursor: pointer;
      &:nth-child(5n) {
        margin-right: 0;
      }
    }
    .logo{
      margin-top: 4rem;
    }
    .logo-img {
      background: white;
      width: 7rem;
      height: 7rem;
      border-radius: 100%;
      text-align: center;
      line-height: 7rem;
    }

    .shop-name {
      font-size: 1.5rem;
      padding: 1rem 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 16.5rem;
      text-align: center;
    }
    .shop-type {
      font-size: 0.8rem;
      line-height: 1.5rem;
      border-top: white 0.1rem solid;
      border-bottom: white 0.1rem solid;
      width: 4rem;
      text-align: center;
    }
    .shop-status {
      font-size: 1rem;
      line-height: 2.8rem;
    }
    .shop-button {
      background: white;
      width: 12rem;
      height: 2rem;
      margin-top: 2rem;
      text-align: center;
      color: #18c4a6;
      line-height: 2rem;
    }

    span{
      font-size: .8rem;
      text-align: center;
      display: flex;
      width: 100%;
      line-height: 3rem;
      justify-content: center;
      margin-bottom: 1.88rem;
    }
  }
}
</style>
